<!DOCTYPE html>
<html lang="en">

<style>
    :root {
        --scale: 1
    }

    body {
        /* --scale: 1; */
        background-image: url("background.png");
    }

    .ScaleBox {

        position: absolute;
        transform: scale(var(--scale)) translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        transform-origin: 0 0;
        left: 50%;
        top: 50%;
        transition: 0.3s;
        z-index: 999;
        /* width: 3840px; */
        /* height: 1879px; */
    }
</style>
<script>
    function adapition(rootEle) {
        let scale = "";
        let width = 3840;
        let height = 2160;
        function getScale() {
            // let { width, height } = this;
            let wh = window.innerHeight / height;
            let ww = window.innerWidth / width;
            console.log(ww < wh ? ww : wh);
            return ww < wh ? ww : wh;
        }
        function setScale() {
            console.log("执行到这里了")
            if (window.innerHeight == 2160) {
                // document.querySelector(".ScaleBox").style.cssText = `height:2160px ;width:3840px`;
                document.querySelector(".ScaleBox").style.height = `2160px`;
            } else {
                // document.querySelector(".ScaleBox").style.cssText = `height:1780px;width:3840px `;
                document.querySelector(".ScaleBox").style.height = `1780px `;
            }
            scale = getScale();
            console.log(scale)
            document.body.style.setProperty("--scale", scale);
        }
        function debounce(fn, time) {
            window.flag = null;
            return function () {
                clearTimeout(window.flag)
                window.flag = setTimeout(() => {
                    fn()
                }, time)
            }
        }
        window.addEventListener("resize", debounce(setScale, 100));
        window.addEventListener("load", debounce(setScale, 100));

    }
    adapition()
</script>
<!-- 
    知识点1：线性渐变（Line Gradients)-
    linear-gradient(blue, red);这种情况是从上到下。
    linear-gradient(0deg, blue 0%, green 40%, red 100%); 这种情况是从下到上  blue 开头 40%是 green 100%是red
    linear-gradient(90deg, blue 0%, green 40%, red 100%);  这种情况是从左到右
    知识点2：盒子边框
     /* 上右下左 */
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    /* source  slice  repeat */
    border-image: linear-gradient(90deg, rgb(0, 137, 255) 0%, rgb(255, 255, 255, 0) 100%) stretch 1;
 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>Document</title>
</head>




<style>
    /* 左边的盒子 */
    .card_left {

        position: absolute;
        right: 1080px;
        top: 300px;
        height: 1288px;
        width: 750px;

        border-radius: 20px;
        opacity: 80%;
    }
    .card_info_left_box:not(:first-child){
        margin-top: 90px;
    }
</style>

<style>
    /* 左下角的按钮 */
    .blue_button_first {
        position: absolute;
        left: -1250px;
        top: 1900px;
        width: 480px;
        height: 140px;
        border-width: 4px 0px 0px 4px;
        border-style: solid;
        border-radius: 45px;
        border-image: linear-gradient(180deg, rgb(12, 133, 240,60%) 0%, rgb(255, 255, 255, 0) 100%) stretch 1;
        opacity: 80%;
        text-align: center;
        font-size: 31px;
        opacity: 80%;
        color: white;
        background: linear-gradient(135deg, rgb(3, 21, 37) 0%, rgb(255, 255, 255, 0) 80%) ;
    }
    .blue_button_second {
        position: absolute;
        left: -1800px;
        top: 1900px;
        width: 480px;
        height: 140px;
        border-width: 4px 0px 0px 4px;
        border-style: solid;
        border-radius: 15px;
        border-image: linear-gradient(180deg, rgb(12, 133, 240,60%) 0%, rgb(255, 255, 255, 0) 100%) stretch 1;
        opacity: 80%;
        text-align: center;
        font-size: 31px;
        opacity: 80%;
        color: white;
        background: linear-gradient(135deg, rgb(3, 21, 37) 0%, rgb(255, 255, 255, 0) 80%) ;
    }
    .blue_button_container{
        padding: 3px;
    }
    .blue_button_image{
        position: relative;
        left: -10px;
        top: 23px;
        width: 12%;
    }
    .blue_button_image{
        /* width: 25px; */
    }
    .blue_button_text{
        position: relative;
        top: 5px;
    }
</style>
<style>
    /* 右边的盒子 */
    * {
        font-family: "Microsoft YaHei";
    }

    .card_right {
        float: right;
        position: absolute;
        top:100px;
        left: 1000px;

        height: 1988px;
        width: 750px;
        border-width: 1.5px 2px 0px 2px;
        border-style: solid;
        border-radius: 20px;
        border-image: linear-gradient(180deg, rgb(12, 133, 240) 0%, rgb(255, 255, 255, 0) 100%) stretch 1;
        /* 阴影 */
        background-image: url('./backgroud_gradient.png');
        box-shadow: 0 0 1px rgb(126, 97, 255) inset;
        opacity: 80%;
    }

    .m-30 {
        margin-top: 30px !important
    }
    .m-50 {
        margin-top: 50px !important
    }
    .f-35 {
        font-size: 35px !important;
    }

    .f-32 {
        font-size: 32px !important;
    }
    .f-48 {
        font-size: 48px !important;
    }

    .card_info_container {
        padding: 40px;
    }

    .card_info_title {
        font-size: 25px;
        color: aliceblue;
        opacity: 50%;
        margin-bottom: 10px;
    }

    .card_info_bottom_description {
        font-size: 32px;
        color: aliceblue;
    }

    .card_info_description {
        margin-top: 15px;
        font-size: 40px;
        color: aliceblue;
        margin-bottom: 15px;
    }

    .card_info_left_description {
        margin-top: 45px;
        font-size: 40px;
        color: aliceblue;
        margin-bottom: 15px;
    }

    .card_info_firstbox_bottom {
        display: grid;
        grid-template-columns: 55% 60%;
        grid-template-rows: 150px 150px;
        margin-bottom: 60px;

    }

    .card_info_thirdbox_topbox {
        display: grid;
        grid-template-columns: 6% 70% 20%;
        margin-top: 60px;
    }

    .card_info_thirdbox_bottombox {
        display: grid;
        grid-template-columns: 50% 50%;
        font-size: 48px;
        align-items: center;
        justify-content: center;
    }

    .button_back {
        width: 100%;
        height: 80px;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        background: rgb(44, 48, 45);
        color: white;
        border-radius: 20px;
    }

    .card_info_secondbox {
        margin-top: 50px;
        margin-bottom: 100px;
    }

    .card_info_bottom_description {
        margin-top: 15px;
    }

    .card_divide {
        border-width: 0px 0px 10px 0px;
        border-style: solid;
        /* source  slice  repeat */
        border-image: linear-gradient(90deg, rgb(0, 137, 255) 0%, rgb(255, 255, 255, 0) 100%) stretch 1;

    }

    .card_button {
        position: relative;
    }
    .txt {
        position: absolute;
        top: -32px;
        left: 120px;
        z-index: 999;
        font-size: 35px;
        color: white;
    }
</style>
<style>

</style>

<style>
    /* 拖拽 */
    [draggable] {
        cursor: move;
    }
</style>

<style>
    /* 中下切换的按钮 */
    .button_switch_group{
        position: absolute;
        top: 1700px;
        right: -200px;
        background-color: linear-gradient( rgb(0, 137, 255) 0%, rgb(255, 255, 255, 0) 100%);
    }
    .switch_button{
        text-align: center;
        text-decoration: none;
        display: inline-block;
        color: white;
        font-size: 32px;
        height: 70px;
        width: 280px;
        border: 0;
        border-radius: 50px;
        background-color: rgba(0, 0, 0, 0.1);
        margin:40px
    }
    .active{
        background-color: skyblue;
    }
    .flexbox{
        display: flex;
    }
</style>
<style>
    /* 阴影 */
    .allShadow{
        /* position: absolute; */
        /* background-color: aqua; */
        /* width: 2160px;
        height: 500px; */
    }
    .shadow_right{
        position: absolute;
        right: -1900px;
    }
    .shadow_left{
        position: absolute;
        left: -2300px;
        transform: rotate(180deg);
    }
    .shadow_top{
        position: absolute;
        transform: rotate(90deg);
        width: 1500px;
    }
    .shadow_bottom{
        position: absolute;
       
    }
</style>
<body>


    <div class="ScaleBox">
        <!-- 阴影 -->
        <!-- <img src="./shadow_left_right.png" class="shadow_left"></img >
        <img src="./shadow_left_right.png" class="shadow_right"></img > -->
        <!-- <img src="./shadow_left_right.png" class="shadow_top"></img >
        <img src="./shadow_left_right.png" class="shadow_bottom"></img > -->
        
        <div class="element">
            <div class="allShadow">

            </div>
    
            <!-- 中下切换的按钮 -->
            <div class="button_switch_group">
                <div class="flexbox">
                    <div class="swtich_button_second ">
                        <button class="switch_button active ">
                            车库整体
                        </button>
                    </div>
                    <div class="swtich_button_first">
                        <button class="switch_button ">
                            电梯间
                        </button>
                    </div>
                    
                </div>
                
            </div>
    
    
            <!-- 左下角的按钮 -->
            <div class="button_group">
                <div class="blue_button_first">
                    <div class="blue_button_container">
                        <img src="./icon_data.png" class="blue_button_image" alt="" >
                         <span class="blue_button_text">授权信息:展示厅大屏</span>
                    </div>
                    
                </div>
                <div class="blue_button_second">
                    <div class="blue_button_container">
                        <img src="./icon_data.png" class="blue_button_image" alt="" >
                         <span class="blue_button_text">当前展示：运维数据</span>
                    </div>
                    
                </div>
            </div>
            
    
    
           <div class="left">
            <img src="./logo.png" alt="" width="600" style="top: 100px;position:absolute;left: -1800px;">
            <!-- 左边的盒子 -->
            <div class="card_left draggable">
                <div class="card_info_container">
                    <!-- 上到下的盒子 -->
                    <div class="card_info_left_box ">
                        <div class="card_info_description">
                            <div class="card_info_title f-35">
                                已占用车库数量
                            </div>
                            <div class="card_info_bottom_description f-32">
                                35个
                            </div>
                        </div>
                    </div>
                    <div class="card_info_left_box ">
                        <div class="card_info_description">
                            <div class="card_info_title f-35">
                                工作中出入口
                            </div>
                            <div class="card_info_bottom_description f-32">
                                7个
                            </div>
                        </div>
                    </div>
                    <div class="card_info_left_box ">
                        <div class="card_info_description">
                            <div class="card_info_title f-35">
                                当前出入口工作模式
                            </div>
                            <div class="card_info_bottom_description f-32">
                                非高峰模式
                            </div>
                        </div>
                    </div>
                    <div class="card_info_left_box ">
                        <div class="card_info_description">
                            <div class="card_info_title f-35">
                                今日停车量
                            </div>
                            <div class="card_info_bottom_description f-32">
                                15
                            </div>
                        </div>
                    </div>
                    <div class="card_info_left_box ">
                        <div class="card_info_description">
                            <div class="card_info_title f-35">
                                今日调用任务数
                            </div>
                            <div class="card_info_bottom_description f-32">
                                35次
                            </div>
                        </div>
                    </div>
                    <div class="card_info_left_box ">
                        <div class="card_info_description">
                            <div class="card_info_title f-35">
                                月保车数量
                            </div>
                            <div class="card_info_bottom_description f-32">
                                40辆
                            </div>
                        </div>
                    </div>
    
                </div>
            </div>
           </div>
    
    
            <!-- 右边的盒子 -->
            <div class="card_right draggable " draggable="true">
                <div class="card_info_container">
                    <div class="card_info_back m-30">
                        <button class="button_back">
                            <div>
                                <img src="back.png" alt="" style="color: white" height=""> 返回
                            </div>
                        </button>
                    </div>
                    <div class="card_info_firstbox">
                        <div class="card_info_firstbox_top ">
                            <div class="card_info_title m-50">
                                车库名
                            </div>
                            <div class="card_info_description f-48">
                                世泊百德广场立体停车库
                            </div>
                            <div class="card_info_title m-50">
                                地址
                            </div>
                            <div class="card_info_description f-32">
                                广州市白云区鹅掌坦111号
                            </div>
                            <div class="card_info_title m-50 f-32">
                                简介
                            </div>
                            <div class="card_info_description f-32">
                                四层双阳移动机器人停车库，共63个车位
                            </div>
                        </div>
                        <div class="card_info_firstbox_bottom m-50">
    
                            <div class="card_info_description ">
                                <div class="card_info_title">
                                    车库信息
                                </div>
                                <div class="card_info_bottom_description">
                                    6位置
                                </div>
                            </div>
                            <div class="card_info_description">
                                <div class="card_info_title">
                                    车库信息
                                </div>
                                <div class="card_info_bottom_description">
                                    6位置
                                </div>
                            </div>
                            <div class="card_info_description m-30">
                                <div class="card_info_title">
                                    车库信息
                                </div>
                                <div class="card_info_bottom_description">
                                    6位置
                                </div>
                            </div>
                            <div class="card_info_description m-30">
                                <div class="card_info_title">
                                    车库信息
                                </div>
                                <div class="card_info_bottom_description">
                                    6位置
                                </div>
                            </div>
                            <div class="card_info_description m-30">
                                <div class="card_info_title">
                                    车库信息
                                </div>
                                <div class="card_info_bottom_description">
                                    6位置
                                </div>
                            </div>
    
                        </div>
                    </div>
                    <div class="card_divide m-30">
                    </div>
                    <div class="card_info_secondbox m-50">
                        <div class="card_info_title">收费信息</div>
                        <div class="card_info_bottom_description ">24小时封顶价格</div>
                        <div class="card_info_bottom_description">每小时价格5元</div>
                    </div>
    
                    <div class="card_divide m-30">
                    </div>
                    <div class="card_info_thirdbox m-30">
                        <div class="card_info_thirdbox_topbox m-30">
                            div.
                            <div class="card_info_title">云监控</div>
                            <div class="card_info_title">点击播放</div>
                        </div>
                        <div class="card_info_thirdbox_bottombox m-30">
                            <div class="card_button">
                                <img src="button.png" alt="" width="">
                                <p class="txt">电梯</p>
                            </div>
                            <div class="card_button">
                                <img src="button.png" alt="" width="">
                                <p class="txt">111</p>
                            </div>
                            <div class="card_button">
                                <img src="button.png" alt="" width="">
                                <p class="txt">111</p>
                            </div>
                            <div class="card_button">
                                <img src="button.png" alt="" width="">
                                <p class="txt">111</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
       
    </div>

</body>
<script>
    //拖拽
    console.log("sd")
    // 尚未实现，当前实现方式需要点击左上角才正确，有很大问题
    const nodeList = document.getElementsByClassName('draggable');
    console.log(nodeList);
    [...nodeList].forEach(el => {
        el.addEventListener('dragstart', (e) => {
            e.dataTransfer.clientX = e.clientX
            e.dataTransfer.clientY = e.clientY
        })
        el.addEventListener('dragend', (e) => {
            const { clientX, clientY, dataTransfer: { clientX: scx, clientY: scy } } = e
            const [tX, tY] = (el.style.transform || '').match(/-?\d+/g) || [0, 0]
            console.log("移动的距离", tX, tY);
            el.style.transform = `translate(${+tX + clientX - scx}px, ${+tY + clientY - scy}px)`
        })
    });
</script>

</html>